<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('资产复核')" />
</head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="post-form">
                <div class="select-list">
                    <ul>



                        <li hidden>
                            <input id="flag3" name="flag3" value="1"></input>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>

                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="recommend()" >
                <i class="fa"></i> 推送
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
</div>

<script th:src="@{/ajax/libs/mux/mux.js}"></script>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    //  var editFlag = [[${@permission.hasPermi('system:post:edit')}]];
    // var removeFlag = [[${@permission.hasPermi('system:post:remove')}]];
    var datas = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "baodao/reviewzcgl";


    $(function() {
        query();
    });
</script>

<script>
    function query() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add/{id}",
            updateUrl: prefix + "/edit/{id}",
            updateUrl: prefix + "/detail/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            /*  sortName: "companyId",*/
            modalName: "药品关系",
            // 测试父子表
            detailView: false,
            // 测试新增 查询条件
            /*queryParams: function(params) {
                 var curParams = {
                     // 传递参数查询参数
                     pageSize: params.limit,
                     pageNum: params.offset / params.limit + 1,
                     searchValue: params.search,
                     orderByColumn: params.sort,
                     isAsc: params.order,
                     // 新增 flag 为0 展示全部 药品信息，为1 展示药品关联表中已建立关系的药品列表
                     //   flag:  $("#flag").val()

                     sellStartTime:"",
                     sellEndTime:"",

                     flag: 0
                 }
                 return curParams;
             },*/
            columns: [
                /*{
                    field: 'no',
                    title: '序号',
                    // sortable: true,
                    //  align: "center",
                    width: 60,
                    formatter: function (value, row, index) {
                        /!*  //获取每页显示的数量
                          var pageSize = $('#table').bootstrapTable('getOptions').pageSize;
                          //获取当前是第几页
                          var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber;
                          //返回序号，注意index是从0开始的，所以要加上1
                          return pageSize * (pageNumber - 1) + index + 1;*!/
                        return index + 1;
                    }
                },*/
                {
                    checkbox: true
                },
                {
                    field: 'sellNo',
                    title: '票号'
                },
                {
                    field: 'sellDate',
                    title: '销售时间'
                },

                {
                    field: 'totalQtum',
                    title: '交易金额'
                },
                {
                    field: 'goodsNum',
                    title: '商品数量'
                },

                {
                    field: 'shopName',
                    title: '店铺名称',
                },
                {
                    field: 'faceId',
                    title: '人脸',
                    visible: false,
                },
                {
                    field: 'memo',
                    title: '数据存疑',
                },
                {
                    field: 'happenedTime',
                    title: '交易时间',
                    visible: false,
                },

                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        /* actions.push('<a class="btn btn-info  btn-xs ' + addFlag + '" href="javascript:void(0)" onclick="$.operate.add(\'' + row.goodscode + '\')"><i class="fa fa-plus"></i>新增</a> ');row.sellNo + row.startTime + row.endTime*/
                        actions.push('<a class="btn btn-success btn-xs ' + "editFlag" + '" href="javascript:void(0)" onclick="openFlv(\'' + row.sellNo +'\')"><i class="fa fa-edit"></i>视频</a> ');
                        //actions.push('<a class="btn btn-success btn-xs ' + "editFlag" + '" href="javascript:void(0)" onclick="detail(\'' + row.sellNo +"','"+ row.startTime+ "','"+ row.endTime+ '\')"><i class="fa fa-edit"></i>推送</a> ');
                        /* actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.postId + '\')"><i class="fa fa-remove"></i>删除</a>');*/
                        // actions.push('<a class="btn btn-danger btn-xs ' + "removeFlag" + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.goodscode + '\')"><i class="fa fa-remove"></i>删除</a>');
                        //actions.push('<a class="btn btn-danger btn-xs ' + "removeFlag" + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.goodscode + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }
            ]

        };
        $.table.init(options);
    }

    function recommend() {
        var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        console.log("已选择数据数量：" + rows.length)
        console.log("已选择数据" + rows.toString())
        let id = rows.toString();
        let url = prefix + '/remove' + '?sellNos=' + id;
        console.log("弹窗 url" + url)

        $.ajax({
            type: 'post',
            url: prefix + '/remove',
            timeout: 30000,
            //	data : queryParams,
            data: {"sellNos":id},
            dataType: 'json',
            success: function (data) {
                console.log(data);
                if(data.code == 0) {
                    $.table.search()
                    alert("操作成功")

                }else{
                    alert("操作异常")
                }

            },
            error: function () {
                alert("调用数据接口失败,请联系管理员");
            }
        });

        //var result = url.replace(/#/g, '%23');
        //$.modal.openTab("新增为关联",result);
    }

    function detail(sellNo,startTime,endTime) {
        table.set();


        let url = prefix + '/detail/' + sellNo+"?startTime="+startTime+"&endTime="+endTime;
        console.log("弹窗 url" + url)
        var result = url.replace(/#/g, '%23');
        //$.modal.openFull("复核详细信息",result);

        // 弹出即全屏
        var index = layer.open({
            type: 2,
            title: '复核详细信息',
            content: result,
            area: ['1000px', '600px'],
            maxmin: true
        });
        layer.full(index);

        //$.modal.openTab("复核详细信息",result);

        //$.modal.openTab("修改" + table.options.modalName, $.operate.editUrl(id));

    }

    function openFlv(sellNO) {
        let flv =  'http://10.0.1.116:30003/profile/demo/zcgl/'+sellNO+'.ts'

        let video = '<div id="videoDiv" style="width: 630px;height: 360px; padding: 10px;background-color: #000000">' +
            /*'           <video id="flv_face"  controls="controls"     >\n' +
            '            <source src="'+flv+'" type="video/mp4">\n' +*/
            '        </video></div>'


        layer.open({
            type: 1,
            title: false,
            area:['auto'],
            //skin: 'layui-layer-nobg', //没有背景色

            shade: 0.8,
            closeBtn: 0,
            shadeClose: true,
            content: video
        });

        test(flv);

        /*layer.open({
            type: 2,
            title: false,
            area: ['630px', '360px'],
            shade: 0.8,
            closeBtn: 0,
            shadeClose: true,
            content: img
        });
*/
        /*layer.open({
            type: 1,
            area: ['500px', '300px'],
            shade: false,
            title: false, //不显示标题
            skin: 'layui-layer-demo',
            //content: $('#flv_face'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            content: '<video id="flv_face" class="img-lg" controls="controls" width="500px" height="300px"  style="width: 100%;height: 100%">\n' +
                '            <source src="http://10.0.1.116:30003/profile/ipc/16396336.mp4" type="video/mp4">\n' +
                '        </video>', //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响

        });*/
    }


    function test(flv){
        var $ = document.querySelector.bind(document);
        var vjsParsed,
            video,
            mediaSource;
        // 定义通用的事件回调处理函数，只做打印事件类型
        function logevent (event) {
            console.log(event);
        }



        // ajax
        let xhr = new XMLHttpRequest();
        xhr.open('GET', flv);
        // 接收的是 video/mp2t 二进制数据，并且arraybuffer类型方便后续直接处理
        xhr.responseType = "arraybuffer";
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState ==4) {
                if (xhr.status == 200) {
                    transferFormat(xhr.response);
                } else {
                    console.log('error');
                }
            }
        }

        function transferFormat (data) {
            // 将源数据从ArrayBuffer格式保存为可操作的Uint8Array格式
            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
            var segment = new Uint8Array(data);
            var combined = false;
            combined = true;
            // 接收无音频ts文件，OutputType设置为'video'，带音频ts设置为'combined'
            var outputType = 'combined';
            var remuxedSegments = [];
            var remuxedBytesLength = 0;
            var remuxedInitSegment = null;

            // remux选项默认为true，将源数据的音频视频混合为mp4，设为false则不混合
            var transmuxer = new muxjs.mp4.Transmuxer({remux: true});

            // 监听data事件，开始转换流
            transmuxer.on('data', function(event) {
                console.log(event);
                if (event.type === outputType) {
                    remuxedSegments.push(event);
                    remuxedBytesLength += event.data.byteLength;
                    remuxedInitSegment = event.initSegment;
                }
            });
            // 监听转换完成事件，拼接最后结果并传入MediaSource
            transmuxer.on('done', function () {
                var offset = 0;
                var bytes = new Uint8Array(remuxedInitSegment.byteLength + remuxedBytesLength)
                bytes.set(remuxedInitSegment, offset);
                offset += remuxedInitSegment.byteLength;

                for (var j = 0, i = offset; j < remuxedSegments.length; j++) {
                    bytes.set(remuxedSegments[j].data, i);
                    i += remuxedSegments[j].byteLength;
                }
                remuxedSegments = [];
                remuxedBytesLength = 0;
                // 解析出转换后的mp4相关信息，与最终转换结果无关
                vjsParsed = muxjs.mp4.tools.inspect(bytes);
                console.log('transmuxed', vjsParsed);

                prepareSourceBuffer(combined, outputType, bytes);
            });
            // push方法可能会触发'data'事件，因此要在事件注册完成后调用
            transmuxer.push(segment); // 传入源二进制数据，分割为m2ts包，依次调用上图中的流程
            // flush的调用会直接触发'done'事件，因此要事件注册完成后调用
            transmuxer.flush(); // 将所有数据从缓存区清出来
        }

        function prepareSourceBuffer (combined, outputType, bytes) {
            var buffer;
            video = document.createElement('video');
            //video = $('#flv_face');
            video.controls = true;

            // MediaSource Web API: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource
            mediaSource = new MediaSource();
            video.src = URL.createObjectURL(mediaSource);
            video.className = "myVideo"

            video.setAttribute("style","height:320px !important")
            //$('#video-wrapper').appendChild(video); // 将H5 video元素添加到对应DOM节点下
            $('#videoDiv').appendChild(video); // 将H5 video元素添加到对应DOM节点下

            // 转换后mp4的音频格式 视频格式
            var codecsArray = ["avc1.64001f", "mp4a.40.5"];

            mediaSource.addEventListener('sourceopen', function () {
                // MediaSource 实例默认的duration属性为NaN
                mediaSource.duration = 0;
                // 转换为带音频、视频的mp4
                if (combined) {
                    buffer = mediaSource.addSourceBuffer('video/mp4;codecs="' + 'avc1.64001f,mp4a.40.5' + '"');
                } else if (outputType === 'video') {

                    // 转换为只含视频的mp4
                    buffer = mediaSource.addSourceBuffer('video/mp4;codecs="' + codecsArray[0] + '"');
                } else if (outputType === 'audio') {
                    // 转换为只含音频的mp4
                    buffer = mediaSource.addSourceBuffer('audio/mp4;codecs="' + (codecsArray[1] ||codecsArray[0]) + '"');
                }

                buffer.addEventListener('updatestart', logevent);
                buffer.addEventListener('updateend', logevent);
                buffer.addEventListener('error', logevent);
                video.addEventListener('error', logevent);
                // mp4 buffer 准备完毕，传入转换后的数据
                // 将 bytes 放入 MediaSource 创建的sourceBuffer中
                // https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer/appendBuffer
                buffer.appendBuffer(bytes);
                // 自动播放
                video.play();

            });
        };
    }

</script>
</body>
</html>
